<div class="col-md-6 col-lg-6"> 
    <form id="contactForm" action="{:cmf_plugin_url('HzMsgBorad://Do/addmsg');}">
        <div class="form-group">
            <span class="formLable requiredForm">Name</span>
            <div class="row">
                <div class="col-lg-6"> 
                    <div class="form-group">
                        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required data-error="Please enter your first name">
                        <span>First</span>
                        <div class="help-block with-errors"></div>
                    </div>
                </div>

                <div class="col-lg-6"> 
                    <div class="form-group">
                        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required data-error="Please enter your last name">
                        <span>Last</span>
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <span class="formLable requiredForm">Email</span>
            <input type="email" class="form-control" id="email" name="email" placeholder="Email" required data-error="Please enter your email">
            <div class="help-block with-errors"></div>
        </div>

        <div class="form-group">
            <span class="formLable">Subject</span>
            <input type="text" class="form-control" id="msg_subject" name="title" placeholder="Subject">
        </div>

        <div class="form-group">
            <span class="formLable">Message</span>
            <textarea class="form-control" id="message" name="msg" rows="5" placeholder="Message"></textarea>
        </div>

        <div class="form-group">
            <span class="formLable">CAPTCHA</span>
            <div class="notRobotCheck">
                <div class="showLeft">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="notrobot" name="robot" value="1" data-error="Are you a robot?">
                        <label class="form-check-label" for="notrobot">I'm not a robot</label>
                    </div>
                </div>
                <input type="hidden" name="type" value="1">
                <div class="showRight">
                    <img src="/themes/defult/public/assets/img/notrobot.png" alt="">
                    <p>reCAPTCHA</p>
                    <p>Privacy·Terms</p>
                </div>
            </div>
        </div>
        <div>
            <button type="submit" id="submit" class="btn default-btn mt-10">Submit</button>
            <div class="clearfix"></div>
        </div>
    </form>
</div>
<block name="scripts">
        <script>
            (function ($) {
                "use strict";

                $("#contactForm").validator().on("submit", function (event) {
                    if (event.isDefaultPrevented()) {
                        // handle the invalid form...
                        formError();
                        submitMSG(false, "Did you fill in the form properly?");
                    } else {
                        // everything looks good!
                        event.preventDefault();
                        submitForm();
                    }
                    return false;
                });

                function submitForm(){
                    var url = $("#contactForm").attr('action');
                    if ($(notrobot).is(':checked') === false) {layer.msg('Are you a robot?');return false;};
                    //loading层
                    var index = layer.load(1, {shade: [0.1,'#fff']});
                    $.ajax({
                        type: "POST",
                        url: url,
                        crossDomain: true == !(document.all),
                        data:$('#contactForm').serialize(),
                        cache: false,
                        success: function (res) {
                            var res = JSON.parse(res);
                            layer.close(index);//关闭进度条
                            if (res.code == 200){
                                layer.msg(res.message,{time:3000},function(){
                                    location.reload();
                                });
                            } else {
                                formError();
                                submitMSG(false, res);
                            }
                        }
                    });
                }

                function formSuccess () {
                    $("#contactForm")[0].reset();
                    submitMSG(true, "Message Submitted!")
                }

                function formError () {
                    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                        $(this).removeClass();
                    });
                }

                function submitMSG (valid, msg) {
                    if (valid) {
                        var msgClasses = "h5 text-center tada animated text-success mt-3";
                    } else {
                        var msgClasses = "h5 text-center text-danger mt-3";
                    }
                    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
                }
            } (jQuery));
        </script>
    </block>